const app = getApp()
const WXAPI = require("../../../../../api/api")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nvabarData: {
      showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
      title: '采集签名', // 导航栏 中间的标题
      textColor: '#333333', // 标题颜色
      bgColor: '#ffffff', // 导航栏背景颜色
      isColor: true,
      isloading: false,
    },
    signPath: [],
    preX: '',
    preY: '',
    assetId: '',
    merchantId: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      assetId: options.assetId,
      merchantId: options.merchantId
    })
    wx.createSelectorQuery().select('#myCanvas').fields({
      node: true,
      size: true
    }).exec(this.init.bind(this))
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },
  init(data) {
    console.log(data);
    const width = data[0].width;
    const height = data[0].height;
    const canvas = data[0].node;
    const ctx = canvas.getContext('2d');
    const dpr = wx.getSystemInfoSync().pixelRatio

    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.lineWidth = 4; //加粗线条
    ctx.scale(dpr, dpr)

    this._dpr = dpr
    this._ctx = ctx
    this._canvas = canvas
  },
  touchStart(e) {
    console.log(e)
    const {
      _ctx: ctx
    } = this
    const {
      clientX: x,
      clientY: y
    } = e.touches[0]
    ctx.beginPath()
    // ctx.moveTo(x-e.target.offsetLeft, y-e.target.offsetTop)
    ctx.moveTo(x - e.target.offsetLeft, y - e.target.offsetTop)
    this.setData({
      preX: x - e.target.offsetLeft,
      preY: y - e.target.offsetTop,
    })
  },
  touchMove(e) {
    const {
      _ctx: ctx
    } = this
    const {
      clientX: x,
      clientY: y
    } = e.touches[0]
    this.data.signPath.push([x, y])
    this.setData({
      signPath: this.data.signPath
    })
    let preX = this.data.preX
    let preY = this.data.preY
    let curX = x - e.target.offsetLeft
    let curY = y - e.target.offsetTop
    let deltaX = Math.abs(preX - curX)
    let deltaY = Math.abs(preY - curY)
    if (deltaX >= 3 || deltaY >= 3) {
      // 前后两点中心点
      let centerX = (preX + curX) / 2
      let centerY = (preY + curY) / 2

      //这里以前一点作为控制点，中心点作为终点，起始点为上一次的中点，很流畅啊！
      ctx.quadraticCurveTo(preX, preY, centerX, centerY);
      ctx.stroke();
      this.setData({
        preX: curX,
        preY: curY,
      })
    }
    // ctx.lineTo(x-e.target.offsetLeft, y-e.target.offsetTop)
    // ctx.lineTo(x, y)
    // ctx.stroke()

  },
  //重绘
  reset() {
    const {
      _ctx: ctx,
      _canvas: canvas
    } = this

    this.setData({
      signPath: []
    })
    ctx.clearRect(0, 0, canvas.width, canvas.height)
  },
  //提交签名图片
  sure() {
    if (this.data.signPath.length <= 0) {
      wx.showToast({
        title: '签名不能为空',
        icon: 'none'
      })
      return
    }
    //导出图片
    this.outImage()
  },
  outImage() {
    const {
      _canvas: canvas,
      _dpr: dpr
    } = this
    var image = canvas.toDataURL("image/png"); // 得到生成后的签名base64位  url 地址
    // console.log(image)
    // wx.navigateTo({
    //   url: '/userPageB/pages/userStore/electronicContract/electronicContract',
    // })
    let data = {
      assetId: this.data.assetId,
      merchantId: this.data.merchantId,
      sign: image
    }
    WXAPI.signContract(data, (res) => {
      if (res.code==200) {
        let signInfo = {
          img: this.getToLocal(image),
          url: res.result.url
        }
        wx.setStorageSync('signInfo', signInfo)
        wx.navigateBack({
          delta: 1
        })
        wx.hideLoading()
      }else{
        wx.hideLoading()
      }
    })
  },
  //base64转本地图片
  getToLocal(e) {
    const base64 = e; //base64格式图片
    const time = new Date().getTime();
    //USER_DATA_PATH：文件系统中的用户目录路径 (本地路径)
    const imgPath = wx.env.USER_DATA_PATH + "/poster" + time + "" + ".png";
    const imageData = base64.replace(/^data:image\/\w+;base64,/, "");
    const file = wx.getFileSystemManager();
    file.writeFileSync(imgPath, imageData, "base64");
    console.log('图片++',imgPath);
    return imgPath
  },


  /**
   * 用户点击右上角分享
   */
  // onShareAppMessage() {

  // }
})